<template>
  <a-form :model="formData" ref="formRef" v-bind="formProps">
    <custom-form-item
      v-for="column in columns"
      :key="column.field"
      :value="formData[column.field]"
      :field="column.field"
      :formData="formData"
      :slotName="column.slot"
      :formItemProps="column.formItemProps"
      :fieldProps="column.fieldProps"
      :hidden="column.hidden"
      :disabled="column.disabled"
      :type="column.type"
      :title="column.title"
      :editing="editing"
    >
      <template v-for="(_, slot) in $slots" v-slot:[slot]="props">
        <slot :name="slot" v-bind="props" />
      </template>
    </custom-form-item>
  </a-form>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import CustomFormItem from './CustomFormItem.vue'

const formRef = ref<any>(null)

defineProps({
  formData: {
      type: Object,
      default: () => {}
    },
    columns: {
      type: Array<any>,
      default: () => []
    },
    formProps: {
      type: Object,
      default: () => {}
    },
    editing: {
      type: Boolean,
      default: true
    }
})

defineExpose({
  validate () {
    return formRef.value.validate()
  },
  resetFields () {
    formRef.value.resetFields()
  }
})
</script>

<style>

</style>
